<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_线性渐变</title>
</head>
<style>
  .box{
    width: 300px;
    height: 200px;
    border: 1px solid black;
    float: left;
    margin-left: 50px;
    font-size: 25px;
  }
  .box1{
    /* 线性渐变 */
    background-image: linear-gradient(red,yellow,green);
  }

  .box2{
    /* 方向设置的线性渐变 */
    background-image: linear-gradient(to right,red,yellow,green);
  }
  .box3{
    /* 角度设置的线性渐变 */
    background-image: linear-gradient(20deg,red,yellow,green);
  }

  .box4{
    /* 设置颜色高度值的线性渐变 */
    background-image: linear-gradient(red 50px,yellow 100px,green 150px);
  }

  .box5{
    /* 设置颜色高度值的线性渐变 */
    background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);
  }

  .box6{
    /* 设置颜色高度值的线性渐变 */
    background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);
    font-size: 50px;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 200px;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
  }
</style>
<body>
  

  <div class="box box1">默认情况（从上到下）</div>
  <div class="box box2">方向设置情况（从左到右）</div>
  <div class="box box3">角度设置情况</div>
  <div class="box box4">设置颜色高度值情况</div>
  <div class="box box5">5</div>
  <div class="box box6">你好啊</div>

</body>
</html>